<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.5.3/vue-router.js"></script>
    <style>
      .router-link-exact-active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <router-link to="/">Go to Home</router-link> |
        <router-link to="/about">Go to About</router-link> |
        <router-link to="/me">Go to Me</router-link> |
        <router-link to="/order">Go to Order</router-link>
      </p>

      <hr />
      <router-view></router-view>
    </div>
    <script>
      const Home = { template: "<div>Home</div>" };
      const About = { template: "<div>About</div>" };
      const Me = {
        template: "<div>Me</div>",
        // beforeRouteEnter: function (to, from, next) {
        //   console.log(to);
        //   // 判断是否登陆成功
        //   let isLogin = window.localStorage.getItem("token");
        //   if (isLogin) {
        //     // 登陆成功
        //     next();
        //   } else {
        //     //   还未登录 跳转到登录页面
        //     next("/login?src=/me");
        //   }
        // },
      };
      const Order = {
        template: "<div>Order</div>",
        // beforeRouteEnter: function (to, from, next) {
        //   console.log(to);

        //   // 判断是否登陆成功
        //   let isLogin = window.localStorage.getItem("token");
        //   if (isLogin) {
        //     // 登陆成功
        //     next();
        //   } else {
        //     //   还未登录 跳转到登录页面
        //     next("/login?src=/order");
        //   }
        // },
      };
      const Login = {
        template: `
        <div>
            <h1>Login</h1>
            <input type="text" />
            <input type="password" />
            <button type="button" @click="loginHandler">登录</button>
        </div>
            `,
        methods: {
          loginHandler: function () {
            //   登陆代码 ajax 用账号密码 换 token
            // 登陆成功
            window.localStorage.setItem("token", "123456");
            this.$router.replace(this.$route.query.src || "/");
          },
        },
      };

      const router = new VueRouter({
        mode: "hash",
        routes: [
          { path: "/", component: Home },
          { path: "/about", component: About },
          { path: "/order", component: Order, meta: { needLogin: true } },
          { path: "/me", component: Me, meta: { needLogin: true } },
          { path: "/login", component: Login },
        ],
      });

      router.beforeEach((to, from, next) => {
        // console.log(to);
        // 可以判断path
        if (to.meta.needLogin) {
          // 判断是否登陆成功
          let isLogin = window.localStorage.getItem("token");
          if (isLogin) {
            // 登陆成功
            console.log("登陆成功");
            next();
          } else {
            console.log("还未登录");
            //   还未登录 跳转到登录页面
            next("/login?src=" + to.path);
          }
        } else {
          next();
        }
      });

      const app = new Vue({
        el: "#app",
        router: router,
      });
    </script>

    <!-- 

全局
beforeEach
beforeResolve
afterEach

路由独享
beforeEnter

组件内部
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave


假设需求是 从 about 页面 跳转至  order订单页面（需要登陆） login页面

已经登陆
1 about
2 order

未登录
1 about  => order/address

order 组件或者路由配置 进入之前拦截 判断是否登录 没有登陆 跳转到 login 

检测到 => order需要登录 需要跳转到 login 携带本应该去到的也页面参数
2 login => 登陆成功 转到 order/address页面

3 order


JSON Web Token  (JWT)
结构
头部（Header）.有效载荷（Playload）.签名（Signature）

头部 token的加密方式
载荷 谁？用户唯一id
签名（Signature）  头部 和 载荷  + 密钥（后端） 新组成的字符串

头部 和 载荷 都是 Base64编码的

 -->
  </body>
</html>
